{% extends "base.html" %}

{% block title_block %}Add New Tag{% endblock %}

{% block stylesheets %}
<link type="text/css" rel="stylesheet" href="/media/css/index.css" />
<link type="text/css" rel="stylesheet" href="/media/css/add.css" />
<link type="text/css" rel="stylesheet"
      href="/media/js/openlayers/theme/default/style.css" />
<link type="text/css" rel="stylesheet"
      href="/media/js/openlayers/theme/default/framedCloud.css" />

{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/media/js/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
    var map;
    var geotags = {};

    geotags.map = null;
    
    geotags.wms = new OpenLayers.Layer.WMS(
        "{{ wms_layer.name }}",
        "{{ wms_layer.url}}",
        {layers:"{{ wms_layer.layers }}"}
        );
    
    //geotags.kml = new OpenLayers.Layer.GML("Tags","geotags", {
    //    format: OpenLayers.Format.KML,
    //    formatOptions: {
    //        extractStyles: true,
    //        extractAttributes: true}}
    //    );
    
    geotags.init = function () {
        var options = {
        'projection' : new OpenLayers.Projection('EPSG:4326'),
        'numZoomLevels' : 18
            };
        geotags.map = new OpenLayers.Map('map', options);
        geotags.map.addLayer(geotags.wms);
        geotags.map.zoomToMaxExtent();
        };
</script>

<script type="text/javascript" src="/media/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",

		// Theme options
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace",
        theme_advanced_buttons2 : "styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons3 : "undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons4 : "bullist,numlist,|,outdent,indent,blockquote,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr",
		theme_advanced_buttons5 : "tablecontrols,|,ltr,rtl,|",
        theme_advanced_buttons6 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,print,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking",
        theme_advanced_buttons7 : "template,restoredraft,|,fullscreen",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,

		// Example word content CSS (should be your site CSS) this one removes paragraph margins
		//content_css : "/media/css/word.css",

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "/geotags/tiny_mce/templates/",
		external_link_list_url : "/geotags/tiny_mce/links/",
		external_image_list_url : "/geotags/tiny_mce/images/",
		media_external_list_url : "/geotags/tiny_mce/media/",
	});
</script>
{% endblock %}

{% block bodyoptions %}{% endblock %}

{% block top %}
<table>
    <tr>
        <td style="width:32px;"><img src="/media/img/logo.png" /></td>
        <td><h1>GeoTags</h1></td>
        <td style="text-align: right;">
            <a href="/">[home]</a>
            <a href="/geotags/logout/">[logout]</a>
        </td>
    </tr>
</table>

{% endblock %}

{% block content %}
<table>
    <tr>
        <td style="width:20%; vertical-align:top; margin:0px;">
            <div id="form">
                <form method="post">
                    {{ form.as_p }}
                    <p><input type="submit" value="add tag"></input></p>
                </form>
            </div>
        </td>
        <td style="width:80%;">
            <div id="map" class="map"></div>
        </td>
    </tr>
</table>
<script type="text/javascript">geotags.init()</script>
{% endblock %}